<template>
    <div :class="isUpdate&&'fadeIn'">
        <div class="theme-1" v-if="templateStyle==='level-4'">
            <div class="practice_common_box" v-if="content.image">
                <div class="topic-image">
                    <loadingImage :src="addPrefixHost(content.image)"/>
                </div>
                <div class="select-container">
                    <div class="topic" v-for="(sen,index) in content.sentences"
                         v-html="getHtml(sen,index)" @click="clickFn($event)">
                    </div>
                    <div class="word-button" data-name="word-button" v-for="(item,index) in wordArr"
                         :class="activeIndex === index&&'active'"
                         @click="answerHandler(item,index,item.order)"
                         v-if="item.answer || item.english || item.chinese || item.pinyin"
                    ><em v-if="item.chinese">{{item.chinese}}</em>
                        <em v-else-if="item.english">{{item.english}}</em>
                        <em v-else-if="item.pinyin">{{item.pinyin}}</em>
                    </div>
                </div>
            </div>
            <div class="container" v-else>
                <h2 class="english">
                    <div class="question" v-for="(sen,index) in content.sentences"
                         v-html="getHtml(sen,index)" @click="clickFn($event)">
                    </div>
                </h2>
                <aside class="pit-words">
                    <div class="word-button" data-name="word-button" v-for="(item,index) in wordArr"
                         :class="activeIndex === index&&'active'"
                         @click="answerHandler(item,index,item.order)"
                         v-if="item.answer || item.english || item.chinese || item.pinyin"
                    >
                        <em v-if="item.chinese">{{item.chinese}}</em>
                        <em v-else-if="item.english">{{item.english}}</em>
                        <em v-else-if="item.pinyin">{{item.pinyin}}</em>
                    </div>
                </aside>
            </div>
        </div>
        <div class="theme-2" v-else-if="templateStyle==='level-3'">
            <div class="container">
                <div class="english">
                    <div class="question" v-for="(item,index) in content.sentences" @click="clickFn($event)">
                        <h2 v-html="getHtml(item,index)" class="text"></h2>
                    </div>
                </div>
                <div class="words">
                    <aside class="pit-img" v-if="content.image">
                        <loadingImage :src="addPrefixHost(content.image)"/>
                    </aside>
                    <aside class="pit-words" :class="content.image?'type-1':'type-2'">
                        <div class="chinese-words" data-name="word-button" v-for="(item,index) in wordArr"
                             :class="activeIndex === index&&'active'"
                             @click="answerHandler(item,index,item.order)"
                             v-if="item">
                            <em v-if="item.chinese">{{item.chinese}}</em>
                            <em v-else-if="item.english">{{item.english}}</em>
                            <em v-else-if="item.pinyin">{{item.pinyin}}</em>
                        </div>
                    </aside>
                </div>
            </div>
        </div>
        <div v-else-if="templateStyle==='level-1'" class="theme-3">
            <div class="container">
                <div class="english">
                    <div class="question" v-for="(item,index) in content.sentences" @click="clickFn($event)">
                        <h2 v-html="getHtml(item,index)" class="text"></h2>
                    </div>
                </div>
                <aside class="pit-words">
                    <div class="chinese-words" data-name="word-button" v-for="(item,index) in wordArr"
                         :class="activeIndex === index&&'active'"
                         @click="answerHandler(item,index,item.order)"
                         v-if="item.answer || item.english || item.chinese || item.pinyin">
                        <em>{{item.answer || item.english || item.chinese || item.pinyin}}</em>
                    </div>
                </aside>
            </div>
        </div>
        <div v-else class="coming-soon-container">
            <div class="coming-soon"></div>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue';
    import {mapState, mapGetters, mapActions} from 'vuex'
    import Component from 'vue-class-component'
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage'

    @Component({
        components: {loadingImage},
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },
        computed: {
            wordArr() {
                const wordArr = [];
                if (this.content.answers) {
                    for (let i = 0; i < this.content.answers.length; i++) {
                        wordArr.push(this.content.answers[i]);
                    }
                }
                return wordArr.sort(function () {
                    return Math.random() - 0.5
                });
            },
            ...mapState('index/exercise/index', {
                contentInfo: state => state.contentInfo,
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {}
            }),
        },
        methods: {
            ...mapActions('index/exercise/index', [
                'setAnswer','setMyAnswer'
            ]),
        },
        created() {
            console.log(this.content)
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    activeItem: null,
                    activeIndex: "",
                    answerArr: [],
                    errorMessage: "",
                    correctArr: [],
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                this.init();
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600)
            }
        },
    })
    export default class chooseNumber extends Vue {
        activeItem = null;
        activeIndex = "";
        answerArr = [];
        isUpdate = false;
        errorMessage = "";
        correctArr = [];
        myAnswer = '';
        sentencesArr = [];
        activeSentence = '';
        preSentence = '';

        init() {
            this.$nextTick(_ => {
                let ele = document.querySelectorAll(".topic-pit-btn");
                for (let i = 0; i < ele.length; i++) {
                    Vue.set(this.answerArr, i, "0");
                    Vue.set(this.correctArr, i, "0");
                }
                if (this.content.answerSenteces) {
                    for (let i = 0; i < this.content.answerSenteces.length; i++) {
                        this.errorMessage += (this.content.answerSenteces[i].chinese || this.content.answerSenteces[i].english) + "<br>";
                    }
                }
                this.setAnswer({
                    answer: false,
                    msg: this.errorMessage
                });
            })
        }

        mounted() {
            this.init();
        }

        answerHandler(item, index, order) {
            this.activeIndex = index;
            this.activeItem = item;
        }

        clickFn(e) {
            this.myAnswer = '';
            if (e.target.nodeName.toUpperCase() === "DIV" && e.target.className === "topic-pit-btn") {
                let ele = e.target;
                let eleIndex = ele.getAttribute("data-name");
                if (this.activeItem != null) {
                    if (this.answerArr[eleIndex] === "0") {
                        Vue.set(this.answerArr, eleIndex, this.activeItem);
                        this.wordArr.splice(this.activeIndex, 1);
                        this.activeItem = null;
                        this.activeIndex = null;
                    } else {
                        this.wordArr.splice(this.activeIndex, 1);
                        this.wordArr.push(this.answerArr[eleIndex]);
                        Vue.set(this.answerArr, eleIndex, this.activeItem);
                        this.activeItem = null;
                        this.activeIndex = null;
                    }
                } else {
                    if (this.answerArr[eleIndex] !== "0") {
                        this.wordArr.push(this.answerArr[eleIndex]);
                    }
                    Vue.set(this.answerArr, eleIndex, "0");
                }
                this.Answer(eleIndex);
                console.log(this.contentInfo)
            }

        }

        Answer(Index) {
            this.sentencesArr = [];
            let answer = false;
            let aIndex = '';
            if (this.answerArr[Index].order) {
                Vue.set(this.correctArr, Index, this.answerArr[Index].order);
            } else {
                Vue.set(this.correctArr, Index, "0");
            }
            for (let i = 0; i < this.content.answerOrder.length; i++) {
                if (this.correctArr.toString() === this.content.answerOrder[i]) {
                    answer = true;
                }
            }
            this.setAnswer({
                answer: answer,
                msg: this.errorMessage
            });
            if(this.content.answerSenteces[0].chinese){
                if(this.content.answerSenteces.length>1) {
                    for (let i = 0; i < this.content.sentences.length; i++) {
                        this.activeSentence = this.content.sentences[i].replace(/[\d\.]/, '');
                        this.activeSentence = this.activeSentence.replace(/[\.]/, '');
                        this.activeSentence = this.activeSentence.replace(/\[/g, '');
                        this.activeSentence = this.activeSentence.replace(/\]/g, '');
                        this.sentencesArr.push(this.activeSentence);
                    }
                    for (let j = 0; j < this.answerArr.length; j++) {
                        if (this.answerArr[j] !== "0") {
                            for (let k = 0; k < this.sentencesArr.length; k++) {
                                this.preSentence = this.sentencesArr[k];
                                this.sentencesArr[k] = this.sentencesArr[k].replace(j + 1, this.answerArr[j].chinese||this.answerArr[j].english);
//                                this.sentencesArr[k] !== this.preSentence ? this.sentencesArr[k] = this.sentencesArr[k].replace(/\d/, '') : '';
                            }
                        }
                    }
                    console.log(this.sentencesArr);
                    console.log(this.answerArr);
                    for (let p of this.sentencesArr) {
                        this.myAnswer += p;
                    }
                }else{
                    for (let i = 0; i < this.content.sentences.length; i++) {
                        if(/[\.]/.test(this.activeSentence.substr(1,2))){
                            this.activeSentence = this.content.sentences[i].replace(/[\d\.]/, '');
                            this.activeSentence = this.activeSentence.replace(/[\.]/, '');
                            this.activeSentence = this.activeSentence.replace(/\[/g, '');
                            this.activeSentence = this.activeSentence.replace(/\]/g, '');
                            this.sentencesArr.push(this.activeSentence);
                            console.log(this.sentencesArr);
                            console.log(this.activeSentence);
                        }else{
                            this.activeSentence = this.content.sentences[i];
                            this.activeSentence = this.activeSentence.replace(/[\.]/, '');
                            this.activeSentence = this.activeSentence.replace(/\[/g, '');
                            this.activeSentence = this.activeSentence.replace(/\]/g, '');
                            this.sentencesArr.push(this.activeSentence);
                            console.log(this.sentencesArr);
                            console.log(this.activeSentence);
                        }
                    }
                    for (let j = 0; j < this.answerArr.length; j++) {
                        if (this.answerArr[j] !== "0") {
                            for (let k = 0; k < this.sentencesArr.length; k++) {
                                this.sentencesArr[k] = this.sentencesArr[k].replace(j + 1, this.answerArr[j].chinese||this.answerArr[j].english);
                                console.log(this.sentencesArr);
                            }
                        }
                    }
                    for (let p of this.sentencesArr) {
                        this.myAnswer += p;
                    }
                }
            }else{
                for(let i=0;i<this.answerArr.length;i++){
                    i<this.answerArr.length-1?this.myAnswer+=this.answerArr[i].english||this.answerArr[i].chinese+',':this.myAnswer+=this.answerArr[i].english||this.answerArr[i].chinese;
                }
            }
            console.log(this.sentencesArr);
            console.log(this.answerArr);
            this.myAnswer = this.myAnswer.replace(/[\d\.]/g, '');
            this.setMyAnswer(this.myAnswer);
        }
        getHtml(item, index) {
            let obj = item;
            if (obj && obj.length) {
                const re = /([^\[\]]+)(?=\])/g;
                let arr = obj.match(re);
                if (arr) {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i] % arr[i] === 0) {
                            let key = this.answerArr[arr[i] - 1] || '';
                            obj = obj.replace(/\[.]、?/, "<div class='topic-pit-btn' data-name='" + (arr[i] - 1) + "'>" + (key.chinese || key.english || '') + "</div>");
                        }
                    }
                }
                return obj;
            }
        }

//        getHtml(sen) {
//            let obj = sen || "";
//            if (obj) {
//                const re = /\[.]/g;
//                const indexArr = obj.match(re);
//                if (indexArr) {
//                    indexArr.forEach((item, index) => {
//                        obj = obj.replace(/\[.]/, `<div class='topic-pit-btn'></div>`)
//                    });
//                }
//                return obj;
//            }
//        }
    }
</script>
<style lang="scss">
    @import "~~assets/sass/mixins";

    .theme-2 {
        .topic-pit-btn {
            min-width: 1.4rem;
            height: .5rem;
            vertical-align: middle;
            display: inline-block;
            border-radius: .2rem;
            box-shadow: -4px 4px 6px 2px #D63D0C inset, 2px -2px 6px #ffffff inset;
            background: #FB9A1E;
            text-align: center;
            line-height: .5rem;
            margin: 0 .1rem;
            cursor: pointer;
            font-size: 26px;
        }
    }

    .theme-3 {
        .topic-pit-btn {
            vertical-align: middle;
            display: inline-block;
            border-radius: .2rem;
            background: url("~~assets/img/exercise/hollow.png") no-repeat;
            background-size: 100% 100%;
            @include ratioContainer(110px, 30px, (width:(155px), height:(125px)));
            text-align: center;
            margin: 0 .1rem;
            cursor: pointer;
            font-size: 26px;
        }
    }

    .theme-1 {
        .topic-pit-btn {
            min-width: 141px;
            height: 61px;
            font-size: 26px;
            line-height: 61px;
            text-align: center;
            padding: 0 10px;
            display: inline-block;
            vertical-align: middle;
            background: url(~~assets/img/main_content/exercise/read-choose-pit-03.png) no-repeat;
            background-size: 100% 100%;
            cursor: pointer;

        }
    }
</style>
<style lang="scss" scoped>
    @import "~~assets/sass/mixins";

    .coming-soon {
        width: 600px;
        height: 236px;
        margin: 100px auto auto auto;
        background: url(~~assets/img/exercise/coming.png) no-repeat;
        background-size: 100% 100%;
    }

    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    .theme-1 {
        text-align: center;
        margin-top: 100px;
        .practice_common_box {
            display: inline-block;
            margin: auto auto;
            text-align: center;
        }

        .topic {
            width: 100%;
            vertical-align: middle;
            margin: 10px 0;
            font-style: normal;
            font-size: 32px;
            color: rgb(44, 54, 133);
            line-height: 1.2;
        }

        .select-container {
            max-width: 450px;
            display: inline-block;
            vertical-align: middle;
            text-align: left;
            margin-left: 40px;
        }

        .topic-image {
            display: inline-block;
            width: 403px;
            height: 293px;
            vertical-align: middle;
            background: url(~~assets/img/main_content/exercise/border-lg.png) no-repeat;
            background-size: contain;
            padding: 20px 15px 10px 15px;
            float: left;
            box-sizing: border-box;
        }

        .topic-image > img {
            width: 97%;
            height: 96%
        }

        .word-button {
            display: inline-block;
            min-width: 163px;
            height: 63px;
            line-height: 63px;
            background: url(~~assets/img/main_content/exercise/read-choose-pit.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            text-align: center;
            padding: 0 10px;
            font-size: 28px;
            color: #2c3685;
            margin: 0 0.5px;
            cursor: pointer;
            &.active {
                background-image: url(~~assets/img/main_content/exercise/btn-purple.png);
            }
        }
        .english {
            margin: .3rem 0;
            font-size: 36px;

        }
        .pit-words {
            margin-top: .8rem;
            text-align: center;
            min-height: 65px;
            .word-button {
                top: auto;
                left: auto;
            }
        }
        .container {
            text-align: center;
            position: relative;
            width: 60%;
            margin: 0 auto;
            .english {
                margin: .3rem 0;
                font-size: 36px;

            }
        }
    }

    .theme-2 {
        text-align: center;
        .question {
            line-height: 1.9;
            text-align: center;
            .text {
                font-weight: 600;
                display: inline-block;
                text-align: left;
            }
        }
        .container {
            text-align: left;
            min-height: 4rem;
            width: 8rem;
            margin: 20px 0;
            display: inline-block;
            .answer {
                vertical-align: middle;
            }
            .english {
                margin: .3rem 0;
                font-size: 36px;
                font-weight: 600;

            }
            .chinese {
                margin: .3rem 0;
                font-size: 28px;
                .pit {
                    width: 1.4rem;
                    height: .5rem;
                    vertical-align: middle;
                    display: inline-block;
                    border-radius: .2rem;
                    box-shadow: -4px 4px 6px 2px #D63D0C inset, 2px -2px 6px #ffffff inset;
                    background: #FB9A1E;
                    margin: 0 .1rem;
                }
            }
            .words {
                text-align: center;
            }
            .pit-img {
                background: url(~~assets/img/main_content/exercise/picture-border-yellow.png) no-repeat center;
                padding: .25rem .18rem;
                width: 3.2rem;
                height: 2.4rem;
                box-sizing: border-box;
                display: inline-block;
                vertical-align: middle;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .pit-words {
                min-width: 2.15rem;
                text-align: center;
                display: inline-block;
                vertical-align: middle;
                .chinese-words {
                    font-size: 28px;
                    padding: .2rem .6rem;
                    box-sizing: border-box;
                    background: url("~~assets/img/main_content/exercise/content-button.png") no-repeat left top 4px;
                    background-size: 100% 100%;
                    border-radius: .3rem;
                    $jianju: .6rem;
                    cursor: pointer;
                    &.active {
                        transition: all .1s ease-in;
                        background-image: url('~~assets/img/main_content/exercise/button-yellow-active.png');
                    }

                }
            }
            .type-1 {
                .chinese-words {
                    margin: 0 20px;
                }
            }
            .type-2 {
                .chinese-words {
                    display: inline-block;
                    margin: .2rem .2rem 0;
                }
            }
        }
    }

    .theme-3 {
        text-align: center;
        .question {
            line-height: 1.9;
            text-align: center;
            .text {
                font-weight: 600;
                display: inline-block;
                text-align: left;
            }
        }
        .container {
            text-align: left;
            min-height: 4rem;
            width: 7rem;
            margin: 20px 0;
            display: inline-block;
            .answer {
                vertical-align: middle;
            }
            .english {
                margin: .3rem 0;
                font-size: 36px;
                font-weight: 600;

            }
            .chinese {
                margin: .3rem 0;
                font-size: 28px;
                .pit {
                    width: 1.4rem;
                    height: .5rem;
                    vertical-align: middle;
                    display: inline-block;
                    border-radius: .2rem;
                    box-shadow: -4px 4px 6px 2px #D63D0C inset, 2px -2px 6px #ffffff inset;
                    background: #FB9A1E;
                    margin: 0 .1rem;
                }
            }
            .pit-words {
                margin-top: .8rem;
                text-align: center;
                .chinese-words {
                    vertical-align: middle;
                    display: inline-block;
                    border-radius: .2rem;
                    background: url("~~assets/img/exercise/hollow.png") no-repeat;
                    background-size: 100% 100%;
                    @include ratioContainer(110px, 30px, (width:(155px), height:(125px)));
                    text-align: center;
                    margin: 0 .1rem;
                    cursor: pointer;
                    font-size: 26px;
                    em {
                        font-weight: 600;
                    }
                    &.active {
                        background-size: 140% 150%;
                        background-position: center;
                        color: white;
                        transition: all .1s ease-in;
                        background-image: url('~~assets/img/main_content/exercise/audio_speaking_active.png');
                    }

                }
            }
        }
    }
</style>
